"use client"
import React, { useEffect, useRef, Fragment } from 'react';
import { Map, APILoader, ScaleControl, ToolBarControl, ControlBarControl, Geolocation } from '@uiw/react-amap';
import {useTheme} from "next-themes";

export default function AMapView() {
    const {theme} = useTheme()
    const center = [109.398396,23.530103];
    const masks = [[109.398396,23.530103],[]]
    if (!window){
        return  <></>
    }
    return (
        <>
            <APILoader version="2.0.5" akey="4231eb4da8ed46472d6f55cddf086dca">
                <div className={"rounded-xl overflow-hidden"}>
                    <Map
                         center={center}
                         zoom={12}
                         style={{ height: 400 }}
                         mapStyle={theme==='dark'?'amap://styles/dark':'amap://styles/light'}
                    >
                       <>
                           <ScaleControl offset={[16, 30]} position="LB" />
                           <ToolBarControl offset={[16, 10]} position="RB" />
                           <ControlBarControl offset={[16, 180]} position="RB" />
                           <Geolocation
                               maximumAge={100000}
                               borderRadius="5px"
                               position="RB"
                               offset={[16, 80]}
                               zoomToAccuracy={true}
                               showCircle={false}
                           />
                       </>
                    </Map>
                </div>
            </APILoader>
        </>
    )
}